<!-- 计划页 -->
<template>
  <el-row>
    <el-col :span="12">
      <el-card>
        <div>
          <h1>今年计划</h1>
          <el-input
            v-model="thisYearPlan"
            :rows="7"
            type="textarea"
          />
          <el-button type="primary" @click="update(year,thisYearPlan)" plain>更新</el-button>
        </div>
      </el-card>
      <el-card>
        <div>
          <h1>明年计划</h1>
          <el-input
            v-model="nextYearPlan"
            :rows="7"
            type="textarea"
          />
        </div>
      <el-button type="primary" @click="update(year+1,nextYearPlan)" plain>更新</el-button>
    </el-card>
    </el-col>

    <el-col :span="12">
      <div id="allPic" :style="{ width: '100%', height: '50%' }">

      </div>
      <div id="userPic" :style="{ width: '100%', height: '50%' }">

      </div>
    </el-col>
  </el-row>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { get,update } from '@/api/plan';
import { getStatisticsByUsername } from '@/api/revexp';
import { userInfoStore } from '@/store';
import * as echarts from 'echarts';

const userStore = userInfoStore();

const thisYearPlan = ref("");
const nextYearPlan = ref("");
const year = ref(0);

const getRevexpData = ()=> {
  getStatisticsByUsername(null).then((res) => {
    pic1.option.series[0].data[0].value = res.data['rev'];
    pic1.option.series[0].data[1].value = res.data['exp'];
    pic1obj.setOption(pic1.option);
  })
  getStatisticsByUsername(userStore.username).then((res) => {
    pic2.option.series[0].data[0].value = res.data['rev'];
    pic2.option.series[0].data[1].value = res.data['exp'];
    pic2obj.setOption(pic2.option);
  })
}

//echarts
const pic1 = {
  option:{
    title: {
      text: '所有用户收支情况',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: '所有用户收支情况',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 0, name: '收入' },
          { value: 0, name: '支出' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ],
  }
}
const pic2 = {
  option:{
    title: {
      text: '当前用户收支情况',
      subtext: userStore.name,
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: '当前用户收支情况',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 0, name: '收入' },
          { value: 0, name: '支出' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ],
  }
}
var pic1obj = ref();
var pic2obj = ref();

const getYear = () =>{
  let date = new Date();
  year.value = date.getFullYear();
};

const getPlan = () => {
  get(year.value).then(res=>{
      thisYearPlan.value =  res.data;
  }),
  get(year.value+1).then(res=>{
      nextYearPlan.value =  res.data;
  })
};

onMounted(() => {
  getYear(),
  getPlan(),
  getRevexpData(),
  pic1obj = echarts.init(document.getElementById('allPic')),
  pic2obj = echarts.init(document.getElementById('userPic'))
})

</script>

<style scoped>
</style>